<template>
  <el-container class="about-layout" style="background: #f5f5f5;">
    <el-header style="text-align: right; font-size: 12px;">
      <el-button type="info" @click="onCreateMetadata" icon="el-icon-plus">创建配置文件</el-button>
    </el-header>
    <el-main :style="{'background-color': '#FFFFFF'}">
      <el-collapse accordion  @change="onHandlerChange">
        <el-collapse-item v-for="(metadata,index) in metadatas" :name="metadata.id" :key="index">
          <template slot="title">
            [ ID : {{metadata.namespaceId}} ] {{metadata.namespaceName}}-{{metadata.profile}}.{{metadata.type}}
          </template>
          <el-tabs type="border-card">
            <el-tab-pane label="主线配置">
              <el-form>
                <el-row>
                  <el-col :span="12" :style="{'text-align':'left'}">
                    <el-form-item label="历史" :label-width="formLabelWidth">
                      <el-select v-model="form.id" placeholder="选择历史配置" @change="onSelectChange">
                        <el-option
                          v-for="(item,index) in metadataHistories"
                          :key="index"
                          :label="item.createTime|formatDate('yyyy-MM-dd hh:mm:ss')"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" :style="{'text-align':'right'}">
                    <el-form-item>
                      <el-button type="primary" @click="onReleaseClick">发 布</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="配置数据" :label-width="formLabelWidth">
                 <div class="json-editor">
                    <codemirror
                      ref="mycode"
                      :value="form.source"
                      :options="cmOptions"
                      @input="onCodeChange"
                      class="code">
                    </codemirror>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="灰度配置">
              <el-form>
                <el-row>
                  <el-col :span="12" :style="{'text-align':'left'}">
                    <el-form-item label="灰度规则" :label-width="formLabelWidth">
                      <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入IP规则">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" :style="{'text-align':'right'}">
                    <el-form-item>
                      <el-button type="primary">发 布</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="配置数据" :label-width="formLabelWidth">
                 <div class="json-editor">
                    <codemirror
                      ref="mycode"
                      :value="form.source"
                      :options="cmOptions"
                      @input="onCodeChange"
                      class="code">
                    </codemirror>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-collapse-item>
      </el-collapse>
    </el-main>
  </el-container>
</template>
<style scoped>
  .about-layout > .el-header{
    background-color: #FFFFFF;
  }
  .el-main > .el-row{
    margin: 10px 0;
  }
  .json-editor{
  height: 100%;
  position: relative;
}
.json-editor >>> .CodeMirror {
  height: auto;
  min-height: 300px;
}
.json-editor >>> .CodeMirror-scroll{
  min-height: 300px;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #F08047;
}
</style>
<script>
 import { codemirror } from 'vue-codemirror'
    import "codemirror/theme/ambiance.css";  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
    require("codemirror/mode/javascript/javascript"); 
  export default {
    components:{
      codemirror
    },
    created(){
      this.$store.dispatch('metadata/all').then((response)=>{
        this.metadatas = response
      }).catch((error)=>{
        console.log(error)
      })
    },
    methods: {
      onSelectChange(id){
        this.onSelecterMetadata(this.namespaceId, id)
        console.log(this.form)
      },
      onReleaseClick(){
        this.$store.dispatch('metadata/save', this.form).then((response)=>{
          console.log(response)
        }).catch((error)=>{
          console.log(error)
        })
      },
      onSelecterMetadata(namespaceId, id){
        const metadatas = this.metadataByNamespaceIds[namespaceId];
        for(var item in metadatas){
          if (id == metadatas[item].id){
            const {namespaceId,source,profile,type,createTime} = metadatas[item]
            this.form = {
              id: id,
              namespaceId:namespaceId,
              source:source,
              profile:profile,
              type:type,
              createTime:createTime
            }
          }
        }
      },
      onHandlerChange(id){
        if(id){
          this.metadatas.forEach(item=>{
            if(item.id == id){
              const {namespaceId, profile} = item
              this.namespaceId = namespaceId
              this.$store.dispatch('metadata/metadatas',{namespaceId:namespaceId,profile:profile}).then((response)=>{
                this.metadataByNamespaceIds[namespaceId] = response
                this.metadataHistories = response
                this.form = response[0]
                console.log(this.metadataHistories)
                this.onSelecterMetadata(namespaceId, id)
              }).catch((error)=>{
                console.log(error)
              })
            }
          })
        }
      },
      onCodeChange(newCode) {
        this.form.source = newCode
      },
      onTypeChange(item){
        if(item === 'yml'){
          console.log("yml")
          this.cmOptions.mode = "text/x-yaml";
          this.PROPERTIES = this.form.source;
          this.form.source = this.YML;
        }else{
          console.log("properties")
          this.cmOptions.mode = "text/x-properties";
          this.YML = this.form.source;
          this.form.source = this.PROPERTIES;
        }
      },
      onSaveMetadata(){
          this.$store.dispatch('metadata/save', this.form).then(() => {
            // this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
          }).catch(() => {
           
          })
        this.dialogFormVisible = false;
      },
      onCreateMetadata(){
        this.$router.push({name:'metadata_edit'})
      },
      onEditClick(metadata){
        this.$router.push({name:'metadata_edit_id', params:{id:metadata.id}})
      }
    },
    data(){
      return {
        namespaceId: 0,
        metadataByNamespaceIds:{},
        metadataHistories:[],
        metadatas:[],
        checkAll: false,
        isIndeterminate: false,
        profiles:[],
        form: {
          id: 0,
          source: '',
          profile: '',
          type: 'yml',
          createTime: 0
        },
        cmOptions:{
            tabSize: 2,
            value:'',
            mode:"text/x-yaml",
            theme: "ambiance",
            addModeClass: false,
            lineNumbers: true,
            line: true
        },
        formLabelWidth: '80px',
      };
    }
  }
</script>